<template>
  <div class="spl-container spl-password-container">
    <!-- 头部的 -->
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="3">
        <div class="grid-content bg-l" @click="backLogin">
          <img src="../../assets/Verification/pal  logo.png" alt="">
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-r">
          <div class="bg-box">
            <img src="../../assets/Verification/phone.png" alt="">
          </div>
          <div class="contus">
            <p class="text-left">全国服务热线</p>
            <span class="phoneNumber">400-716-2588</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 标题部分 -->
    <div style="padding: 40px 0;margin-left: 10%;font-size: 16px">
      <span>找回密码</span>
    </div>
    <!-- steps条 -->
    <el-steps :active="active" align-center finish-status="success" simple style="width:80%;margin-left: 10%;">
      <el-step title="填写用户名"></el-step>
      <el-step title="验证身份"></el-step>
      <el-step title="设置新密码"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <!-- 中间的框部分 -->
    <!--第一步-->
    <div v-show="active==0">
      <el-form ref="firstForm" :model="firstForm" label-width="80px">
        <el-form-item label="账户名:" prop="phone"
                      :rules="[{ required: true, message: '请输入账户名', trigger: 'blur'}, {validator:this.validUserMobile,trigger:'blur'}]">
          <el-input v-model="firstForm.phone" style="width:250px" placeholder="已验证手机"></el-input>
        </el-form-item>
        <el-form-item label="验证码:" prop="imgCode"
                      :rules="[{ required: true, message: '请输入验证码', trigger: 'blur'},{min: 4, message: '不能少于4个字符',trigger: 'blur'}]">
          <el-input v-model="firstForm.imgCode" style="width:250px"></el-input>
          <img class="imgcode" :src="firstForm.imgcodeSrc">
          <span class="ml-10">看不清? <span class="f-cursor text-blue" @click="getNewcodeImg()">换一张</span></span>
        </el-form-item>
        <el-form-item>
          <el-button @click="verifyFirstForm()" type="primary" class="s-btn" :loading="firstForm.btnLoading"
                     style="width:100px">提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--第二步-->
    <div v-show="active==1">
      <el-form ref="secondForm" :model="secondForm" label-width="100px">
        <el-form-item label="账户名:">
          <p v-text="secondForm.userName"></p>
        </el-form-item>
        <el-form-item label="手机:">
          <p v-text="secondForm.hidePhone"></p>
        </el-form-item>
        <el-form-item label="手机验证码:" prop="phoneCode" :rules="{ required: true, message: '请输入手机验证码', trigger: 'blur'}">
          <el-input v-model="secondForm.phoneCode" style="width:250px"></el-input>
          <el-button @click="sendPhoneCode()" type="primary" class="ml-20 s-btn" :disabled="secondForm.isSendPhone" v-text="secondForm.sendPhoneText"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button :loading="secondForm.btnLoading" @click="verifySecondForm()" type="primary" class="w-100 s-btn">提交</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--第三步-->
    <div v-show="active==2">
      <el-form :model="thirdForm" status-icon ref="thirdForm" label-width="100px">
        <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入新密码', trigger: 'blur' },{validator:this.checkPassword1,trigger:'blur'}]">
          <el-input type="password" v-model="thirdForm.password" class="w-250" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPassword" :rules="[{ required: true, message: '请再次输入新密码', trigger: 'blur' },{validator:this.checkPassword2,trigger:'blur'}]">
          <el-input type="password" v-model="thirdForm.checkPassword" class="w-250" autocomplete="new-password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="verifyThirdForm()" type="primary" class="w-100 s-btn">提交</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--第四步-->
    <div v-show="active==3" class="tip-box text-center" style="margin-top: 120px;">
      <div class="pic">
        <img src="../../assets/Verification/4-2.png" alt="">
        <div class="inlineBlock">
          <p class="succuss-text">新密码设置成功！</p>
          <p class="text-left">请牢记您的新密码</p>
        </div>
      </div>

      <el-button type="primary" style="width: 150px" class="s-btn" @click="backLogin">返回首页</el-button>
    </div>

  </div>
  <!-- </div> -->

</template>
<script>
export default {
  data () {
    return {
      active: 0,
      firstForm: {
        phone: '',
        imgCode: '',
        imgcodeSrc: '',
        stamp: '',
        btnLoading: false
      },

      secondForm: {
        userId: '',
        userName: '',
        hidePhone: '',
        phoneCode: '',
        sendPhoneText: '发送验证码',
        isSendPhone: false,
        btnLoading: false
      },

      thirdForm: {
        password: '',
        checkPassword: '',
        btnLoading: true
      }

    }
  },
  mounted () {
    this.getNewcodeImg()
  },
  methods: {
    getNewcodeImg () {
      this.firstForm.stamp = String(new Date().getTime())
      this.firstForm.imgcodeSrc = '/api/sys/no-limit/picture/code/' + this.firstForm.stamp
    },
    // 验证第一步
    verifyFirstForm () {
      this.firstForm.btnLoading = true
      this.$refs.firstForm.validate((valid) => {
        if (valid) {
          this.submitFirstForm()
        } else {
          this.firstForm.btnLoading = false
        }
      })
    },

    //   验证手机号码是否注册
    validUserMobile (rule, value, callback) {
      if (value != undefined && value != null && value != '') {
        this.$http({
          url: '/sys/no-limit/validate/phone',
          method: 'post',
          data: {
            mobile: value,
            useType: '03'
          }
        }).then(({ data }) => {
          if (data.code == -1) {
            if (!data.data) {
              callback(new Error(data.msg))
            } else {
              callback()
            }
          } else {
            callback()
          }
        })
      }
    },

    //  第一步-提交
    submitFirstForm () {
      this.$http({
        url: '/tenant/no-limit/forget/user',
        method: 'post',
        data: {
          businessType: 'v_c_getbackpassword__',
          receiverAccount: this.firstForm.phone,
          stamp: this.firstForm.stamp,
          validateCode: this.firstForm.imgCode
        }
      }).then(({ data }) => {
        if (data.code == 0) {
          var phone = this.firstForm.phone
          this.secondForm.hidePhone = phone.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2')
          this.secondForm.userName = data.data.userName
          this.secondForm.userId = data.data.id
          ++this.active
          this.firstForm.btnLoading = false
        } else {
          this.firstForm.btnLoading = false
          if (data.msg) {
            this.$message.error(data.msg)
          } else {
            this.$message.error(this.$global.errorMsg)
          }
        }
      }).catch((data) => {
        this.firstForm.btnLoading = false
      })
    },

    //  发送短信验证码
    sendPhoneCode () {
      this.$http({
        url: '/sys/no-limit/send/mobile/code',
        method: 'post',
        data: {
          businessType: 'v_c_login__',
          receiverAccount: this.firstForm.phone,
          selfValidate: true,
          stamp: this.firstForm.stamp,
          validateCode: this.firstForm.imgCode
        }
      }).then(({ data }) => {
        if (data.code == 0) {
          var s = 60
          var that = this
          that.secondForm.isSendPhone = true
          that.secondForm.sendPhoneText = '重新获取(' + s + 's)'
          var timer = setInterval(function () {
            if (s > 0) {
              that.secondForm.sendPhoneText = '重新获取(' + s + 's)'
            } else {
              that.secondForm.isSendPhone = false
              that.secondForm.sendPhoneText = '重新获取'
              clearInterval(timer)
            }
            --s
          }, 1000)
        } else {
          if (data.title) {
            this.$message.error(data.title)
          } else {
            this.$message.error(this.$global.errorMsg)
          }
        }
      })
    },

    // 验证第二步
    verifySecondForm () {
      this.secondForm.btnLoading = true
      this.$refs.secondForm.validate((valid) => {
        if (valid) {
          this.submitSecondForm()
        } else {
          this.secondForm.btnLoading = false
        }
      })
    },

    //  第二步-提交
    submitSecondForm () {
      this.$http({
        url: '/sys/no-limit/validate/mobile/code',
        method: 'post',
        data: {
          businessType: 'v_c_login__',
          receiverAccount: this.firstForm.phone,
          stamp: this.firstForm.stamp,
          code: this.secondForm.phoneCode,
          validateCode: this.firstForm.imgCode
        }
      }).then(({ data }) => {
        if (data.code == 0) {
          ++this.active
          this.secondForm.btnLoading = false
        } else {
          this.secondForm.btnLoading = false
          if (data.msg) {
            this.$message.error(data.msg)
          } else {
            this.$message.error(this.$global.errorMsg)
          }
        }
      }).catch((data) => {
        this.secondForm.btnLoading = false
      })
    },

    checkPassword1 (rule, value, callback) {
      if (this.thirdForm.checkPassword != '') {
        this.$refs.thirdForm.validateField('checkPassword')
      }
      callback()
    },
    checkPassword2 (rule, value, callback) {
      if (this.thirdForm.password != '' && this.thirdForm.checkPassword != '' && this.thirdForm.password != this.thirdForm.checkPassword) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    },

    // 验证第三步
    verifyThirdForm () {
      console.log(0)
      this.thirdForm.btnLoading = true
      this.$refs.thirdForm.validate((valid) => {
        if (valid) {
          this.submitThirdForm()
        } else {
          this.thirdForm.btnLoading = false
        }
      })
    },

    //  第三步-提交
    submitThirdForm () {
      this.$http({
        url: '/tenant/no-limit/modify/password',
        method: 'post',
        data: {
          id: this.secondForm.userId,
          mobileValidateCodeCheckVO: {
            businessType: 'v_c_login__',
            code: this.secondForm.phoneCode,
            receiverAccount: this.firstForm.phone,
            stamp: this.firstForm.stamp,
            validateCode: this.firstForm.imgCode
          },
          password: this.thirdForm.password,
          passwordConfig: this.thirdForm.checkPassword
        }
      }).then(({ data }) => {
        if (data.code == 0) {
          this.active = 4
          this.thirdForm.btnLoading = false
        } else {
          this.thirdForm.btnLoading = false
          if (data.msg) {
            this.$message.error(data.msg)
          } else {
            this.$message.error(this.$global.errorMsg)
          }
        }
      }).catch((data) => {
        this.thirdForm.btnLoading = false
      })
    },

    backLogin () {
      this.$router.replace('/login')
    }

  }
}
</script>
<style lang="less" scoped>
  .spl-container {
    margin-top: 0;
    height: 100%;
    background-color: #EFF3F8;
  }

  .row-bg {
    background-color: #f2f2f2;
    box-shadow: 0px 0px 16px 0px rgba(74, 74, 74, 0.5);
  }

  .bg-l,
  .bg-r {
    padding: 10px 40px;
    box-sizing: border-box;
  }

  .bg-r {
    width: 100%;
    height: 41px;
    text-align: right;
    .bg-box {
      display: inline-block;
      transform: scale(0.8);
      img{
        vertical-align: middle;
        margin-top: -30px;
      }
    }
    .contus {
      display: inline-block;
    }
  }

  .bg-r img {
    display: inline-block;
    width: 40px;
    height: 41px;
  }

  .el-form {
    width: 550px;
    margin: auto;
    margin-top: 120px;
  }

  .demo-ruleForm {
    margin-top: 0px;
    margin-left: -20px;
  }

  .tip-box {
    img {
      display: inline-block;
      width: 65px;
      height: 65px;
      vertical-align: middle;
      transform: scale(0.8);
      margin-top: -40px;
      margin-right: 10px;
    }
    .el-button {
      margin-top: 50px;
    }
    .succuss-text{
      color: #7ABD54;
      font-size: 18px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }

  .tip-box1 {
    width: 100px;
    margin: auto;
    margin-top: 10px;
  }

  .imgcode {
    vertical-align: middle;
    margin-left: 10px;
  }
  .phoneNumber{
    color: #1378DA;
    font-size: 16px;
    font-weight: bold;
  }
</style>
<style lang="less">
  .spl-password-container {
    .el-steps--simple {
      box-sizing: border-box;
    }
  }
</style>
